<template>
  <!-- // 预警措施 -->
  <div class="homePageCard">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">现场视频</div>
      <a>更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
    </div>
    <div class="flexAround Search">
      <el-input size="small" v-model="form.place" placeholder="请输入地点" class="right">
      </el-input>
      <el-button size="small" type="primary">搜索</el-button>
    </div>
    <div class="flexAround margin10 vidoeDiv" ref="iframeRef">
      <div class="img" v-for="index in arr" :key="index">
        <video :id="`flv-${index}`" muted controls controlsList="nodownload" />
      </div>
    </div>
  </div>
</template>

<script>
import flv from "flv.js";
import Axios from "axios";

export default {
  name: "EDResourcesLiveVideo",
  components: {},
  data() {
    return {
      activeName: "1",
      form: {
        place: ""
      },
      spUrl: "",
      pc: null,
      flvPlayer: null,
      stream: null,
      arr: [
        "151310000003040557",
        "151310000003040559",
        "151310000003040560",
        "151310000003040562"
        // "150210000003020284",
        // "150210000003020285",
        // "150210000003020286",
        // "150210000003020287",
        // "150210000003020288"
      ]
    };
  },
  mounted() {
    this.players = [];
    this.forArr();
  },
  beforeDestroy() {
    this.players.forEach(el => {
      el && el.destroy();
      el = null;
    });
    console.log("this.players", this.players);
  },
  methods: {
    forArr() {
      this.arr.forEach((item) => {
        this.play(item);
      });
    },
    play(devCode) {
      const videourl = process.env.VUE_APP_SHIPIN_URL;
      const url = `${videourl}/ems/v1/uvp/api/playvideo?code=${devCode}`;
      Axios.get(url).then(res => {
        if (res.status === 200) {
          let location = res.data.location;
          if (location) {
            const path = location.split("/mediatranscode")[1];
            location = `${videourl}/mediatranscode${path}`;
          }
          var videoElement = document.getElementById(`flv-${devCode}`);
          const flvPlayer = flv.createPlayer({
            type: "flv",
            url: location
          }, {
            autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
            autoCleanupMinBackwardDuration: 10, // 指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
            isLive: true,
            lazyLoadMaxDuration: 60
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
          this.players.push(flvPlayer);
        }
      });
      // Axios({
      //   xhrFields: {
      //     withCredentials: true
      //   },
      //   async: false,
      //   method: "get",
      //   contentType: "application/json",
      //   dataType: "json",
      //   url: url,
      //   success: function (result) {
      //     const { location } = result;
      //     console.log(location);
      //     var videoElement = document.getElementById(`flv-${devCode}`);
      //     var flvPlayer = flv.createPlayer({
      //       type: "flv",
      //       url: location
      //     });
      //     flvPlayer.attachMediaElement(videoElement);
      //     flvPlayer.load();
      //     flvPlayer.play();
      //   }
      // });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style scoped lang="less">
.homePageCard{
  height: 90%;
}
.Search {
  width: 93%;
  margin: 10px auto;
  :deep(.el-button--primary) {
    background: #007fcf;
    border-color: #14a8ed;
  }
}
.right {
  :deep(.el-input__inner) {
    width: 95%;
    background-color: rgba(0, 127, 207, 0.2);
    border: 1px solid #14a8ed;
    color: #ccc;
  }
}
.btn {
  :deep(.el-button--small) {
    margin-left: 8px;
    height: 30px;
    margin-top: 5px;
    font-size: 14px;
  }
}
.vidoeDiv {
  flex-wrap: wrap;
  height: 68%;
  .img {
    width: 48%;
    height: 50%;
    margin-bottom: 10px;
    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
}
</style>
